<template>
  <view class="search-container">
    <!-- 搜索头部 -->
    <view class="search-header">
      <view class="search-input-box">
        <uni-icons
          type="search"
          size="16"
          color="#999"
          @click="handleSearch"
        ></uni-icons>
        <input
          v-model="searchKeyword"
          class="search-input"
          placeholder="搜索衣物"
          focus
          confirm-type="search"
          @input="handleInput"
          @confirm="handleSearch"
        />
        <uni-icons
          v-if="searchKeyword"
          type="clear"
          size="16"
          color="#999"
          @click="clearSearch"
        ></uni-icons>
      </view>
      <text class="cancel-btn" @click="handleBack">取消</text>
    </view>
    <!-- 搜索内容 -->
    <view
      class="search-content"
      :style="{ paddingBottom: bottomSafeArea + 20 + 'rpx' }"
    >
      <!-- 搜索记录 -->
      <view
        v-if="!searchKeyword && searchHistory.length > 0"
        class="search-history"
      >
        <view class="history-header">
          <text class="history-title">搜索记录</text>
          <uni-icons
            type="trash"
            size="16"
            color="#999"
            @click="clearHistory"
          ></uni-icons>
        </view>
        <view class="history-list">
          <view
            v-for="(item, index) in searchHistory"
            :key="index"
            class="history-item"
            @click="handleHistoryClick(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>

      <!-- 热门搜索 -->
      <view v-if="!searchKeyword" class="hot-search">
        <view class="hot-header">
          <text class="hot-title">热门搜索</text>
        </view>
        <view class="hot-list">
          <view
            v-for="(item, index) in hotSearchList"
            :key="index"
            class="hot-item"
            @click="handleHotClick(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>

      <!-- 搜索结果 -->
      <view
        v-if="searchKeyword && searchResults.length > 0"
        class="search-results"
      >
        <view class="results-header">
          <text class="results-title"
            >搜索结果 ({{ searchResults.length }})</text
          >
        </view>
        <view class="results-list">
          <view
            v-for="item in searchResults"
            :key="item.id"
            class="result-item"
            @click="handleResultClick(item)"
          >
            <image
              :src="getFullImagePath(item.image)"
              mode="aspectFill"
              class="result-image"
            />
            <view class="result-info">
              <text class="result-name">{{ item.name }}</text>
              <text class="result-category">{{ item.category }}</text>
              <text class="result-desc">{{ item.description }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 无搜索结果 -->
      <view
        v-if="searchKeyword && searchResults.length === 0 && !loading"
        class="no-results"
      >
        <image src="@/static/empty.png" class="no-results-img" />
        <text class="no-results-tip">试试其他关键词</text>
      </view>

      <!-- 加载中 -->
      <view v-if="loading" class="loading-box">
        <view class="loading-spinner"></view>
        <text class="loading-text">搜索中...</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { avatarUrlImg } from "@/api/config/http";

const baseImageUrl = avatarUrlImg;
const getFullImagePath = (path: string) => {
  return path.startsWith("http") ? path : baseImageUrl + path;
};

// 获取系统信息和安全区域
const { safeArea } = uni.getSystemInfoSync();
const bottomSafeArea = ref(safeArea?.bottom ?? 0);

// 搜索相关
const searchKeyword = ref("");
const loading = ref(false);
const searchHistory = ref<string[]>(["白色T恤", "牛仔裤", "运动鞋", "连衣裙"]);
const hotSearchList = ref<string[]>([
  "春季搭配",
  "商务正装",
  "休闲装",
  "运动装",
  "连衣裙",
  "外套",
]);

// 模拟搜索结果
const searchResults = ref<any[]>([]);

// 返回上一页
const handleBack = () => {
  uni.navigateBack();
};

// 输入处理
const handleInput = (e: any) => {
  const value = e.detail.value;
  searchKeyword.value = value;

  // 取消自动搜索，只在回车或点击搜索图标时触发
  if (!value.trim()) {
    searchResults.value = [];
  }
};

// 执行搜索
const performSearch = (keyword: string) => {
  loading.value = true;

  // 模拟搜索延迟
  setTimeout(() => {
    // 模拟搜索结果
    const mockResults = [
      {
        id: 1,
        name: "白色T恤",
        category: "上衣",
        description: "舒适透气的白色T恤",
        image: "/static/icon/camera.png",
      },
      {
        id: 2,
        name: "牛仔裤",
        category: "裤子",
        description: "经典蓝色牛仔裤",
        image: "/static/icon/car.png",
      },
      {
        id: 2,
        name: "牛仔裤",
        category: "裤子",
        description: "经典蓝色牛仔裤",
        image: "/static/icon/car.png",
      },
    ].filter(
      (item) =>
        item.name.includes(keyword) ||
        item.category.includes(keyword) ||
        item.description.includes(keyword)
    );

    searchResults.value = mockResults;
    loading.value = false;
  }, 500);
};

// 搜索确认
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    performSearch(searchKeyword.value);
    addToHistory(searchKeyword.value);
  }
};

// 清空搜索
const clearSearch = () => {
  searchKeyword.value = "";
  searchResults.value = [];
};

// 添加到搜索历史
const addToHistory = (keyword: string) => {
  if (!searchHistory.value.includes(keyword)) {
    searchHistory.value.unshift(keyword);
    // 限制历史记录数量
    if (searchHistory.value.length > 10) {
      searchHistory.value = searchHistory.value.slice(0, 10);
    }
  }
};

// 点击历史记录
const handleHistoryClick = (keyword: string) => {
  searchKeyword.value = keyword;
  performSearch(keyword);
};

// 点击热门搜索
const handleHotClick = (keyword: string) => {
  searchKeyword.value = keyword;
  performSearch(keyword);
  addToHistory(keyword);
};

// 清空搜索历史
const clearHistory = () => {
  uni.showModal({
    title: "提示",
    content: "确定要清空搜索记录吗？",
    success: (res) => {
      if (res.confirm) {
        searchHistory.value = [];
      }
    },
  });
};

// 点击搜索结果
const handleResultClick = (item: any) => {
  uni.navigateTo({
    url: `/pages/goods/goods?id=${item.id}`,
  });
};

onMounted(() => {
  // 页面初始化
});
</script>

<style lang="scss">
page {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
</style>
<style scoped lang="scss">
.search-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;

  .search-input-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 20rpx;
    padding: 16rpx 20rpx;
    margin-right: 20rpx;

    .search-input {
      flex: 1;
      margin: 0 16rpx;
      font-size: 28rpx;
      background: transparent;
      border: none;
      outline: none;
    }
  }

  .cancel-btn {
    font-size: 28rpx;
    color: #92beab;
  }
}

.search-content {
  flex: 1;
  //   padding: 20rpx 20rpx 0 20rpx;
}

.search-history {
  margin-bottom: 40rpx;
  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .history-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    .history-item {
      padding: 12rpx 24rpx;
      background: #fff;
      border-radius: 20rpx;
      font-size: 26rpx;
      color: #666;
      border: 1rpx solid #eee;
    }
  }
}

.hot-search {
  .hot-header {
    margin-bottom: 20rpx;
    .hot-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .hot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    .hot-item {
      padding: 12rpx 24rpx;
      background: #fff;
      border-radius: 20rpx;
      font-size: 26rpx;
      color: #666;
      border: 1rpx solid #eee;
    }
  }
}

.search-results {
  .results-header {
    margin-bottom: 20rpx;
    .results-title {
      font-size: 28rpx;
      color: #666;
    }
  }

  .results-list {
    .result-item {
      display: flex;
      background: #fff;
      padding: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

      .result-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }

      .result-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .result-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }

        .result-category {
          font-size: 26rpx;
          color: #92beab;
          margin-bottom: 8rpx;
        }

        .result-desc {
          font-size: 24rpx;
          color: #999;
          line-height: 1.4;
        }
      }
    }
  }
}

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  .no-results-img {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  .no-results-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 10rpx;
  }

  .no-results-tip {
    font-size: 26rpx;
    color: #999;
  }
}

.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  .loading-spinner {
    width: 48rpx;
    height: 48rpx;
    border: 6rpx solid #92beab;
    border-top: 6rpx solid transparent;
    border-radius: 50%;
    animation: spin 0.5s linear infinite;
    margin-bottom: 20rpx;
  }

  .loading-text {
    color: #92beab;
    font-size: 28rpx;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
